<template>
	<view class="set">
		<view
			class="list-cell b-b"
			:class="{ 'm-t': item.class === 'mT' }"
			v-for="item in setList"
			:key="item.title"
			hover-class="cell-hover"
			:hover-stay-time="50"
		>
			<text class="cell-tit">{{ item.title }}</text>
			<text class="cell-tip">{{ item.content }}</text>
			<!-- <text class="cell-more iconfont iconyou"></text> -->
		</view>

		<view class="cu-list menu sm-border card-menu" v-if="styleUserIsOpen">
			<view class="cu-item">
				<view class="content flex align-center">
					<text
						class="cuIcon-colorlens"
						:class="'text-' + themeColor.name"
					></text>
					<view
						class="padding solid radius shadow-blur"
						:class="'bg-' + themeColor.name"
					></view>
					<view class="title"
						>主题色：<text :class="'text-' + themeColor.name">{{
							themeColor.title
						}}</text></view
					>
				</view>
				<view class="action">
					<button
						class="cu-btn round shadow"
						@click="showColorModal"
						:class="'bg-' + themeColor.name"
					>
						<text class="cuIcon-colorlens"></text> 选择主题
					</button>
				</view>
			</view>
		</view>
		<view
			class="list-cell log-out-btn"
			:class="'text-' + themeColor.name"
			@tap="toLogout"
		>
			<text class="cell-tit">删除设备</text>
		</view>
		<!-- modal -->
		<!-- 选择颜色模态框 -->
		<view class="cu-modal" :class="{ show: colorModal }">
			<view class="cu-dialog">
				<view class="cu-bar justify-end solid-bottom">
					<view class="content">选择颜色</view>
					<view class="action" @tap="colorModal = false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="grid col-5 padding">
					<view
						class="padding-xs"
						v-for="(item, index) in themeList"
						:key="index"
						@tap="SetColor(item)"
						:data-color="item.name"
					>
						<view class="padding-tb radius" :class="'bg-' + item.name">
							{{ item.title }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { logout } from '@/api/login';
import {cstmDetail,deleteWatch} from '@/api/userInfo';
export default {
	data() {
		return {
			isVersionUpgradeShow: false,
			loadProgress: 0,
			CustomBar: this.CustomBar,
			user: {},
			setList: [
				{
					title: '姓名',
					url: '/pages/user/userinfo/userinfo',
					content: ''
				},
				{
					title: '性别',
					url: '/pages/public/password?type=1',
					content: ''
				},
				{
					title: '电话',
					url: '/pages/set/authorization/list',
					content: ''
				},
				{
					title: '住址',
					url: '/pages/set/invoice/invoice',
					content: ''
				},
				{ title: '腕表类型', url: '/pages/set/invoice/list', content: '', class: 'mT'},
				{ title: '腕表序列号', url: 'clearCache', content: '' },
				{
					title: '腕表手机号',
					url: '/pages/set/about/about',
				}
			],
			styleUserIsOpen: false,
			notifyChecked: false,
			isNewVersion: false,
			colorModal: false,
			themeList: this.$mConstDataConfig.themeList
		};
	},
	onLoad(option) {
		this.cstmId = option.id;
		this.initData();
		// #ifdef APP-PLUS
		if (uni.getSystemInfoSync().platform === 'ios') {
			this.CustomBar = 0;
		}
		// #endif
	},
	methods: {
		// 初始化数据
		initData() {
			/*
			this.user = uni.getStorageSync('user');
			// 缓存大小
			this.setList[5].content = `${uni.getStorageInfoSync().currentSize} kb`;
			// #ifdef APP-PLUS
			// eslint-disable-next-line
			this.setList[8].content = `当前版本 ${plus.runtime.version}`;
			// #endif
			*/
		   this.showCstmInfo();
		},
	    async deleteWatch(){
			var params = {cstmId : this.cstmId};
			await this.$http
				.get(`${deleteWatch}`, params)
				.then(r => {
					//console.log("r.data: " + JSON.stringify(r.data));
					this.loading = false;
					if(r.data.success){
						this.$mHelper.toast('删除设备成功！');
						this.$mRouter.back();
					}else{
						this.$mHelper.toast('删除设备失败:'+r.data.msg);
						
					}
				
				})
				.catch(() => {
					this.loading = false;
				});			
		},
		async showCstmInfo() {
			var params = {cstmId : this.cstmId};
			await this.$http
				.get(`${cstmDetail}`, params)
				.then(r => {
					//console.log("r.data: " + JSON.stringify(r.data));
					this.loading = false;
					this.setList.forEach(item =>{
						if(item.title === '姓名'){
						   item.content = r.data.customName;						  
						}else if(item.title === '性别'){
						  if(r.data.sex ===2)
						   item.content = '女';
						  else if(r.data.sex ===1)
						   item.content = '男';
						}else if(item.title === '电话'){
						   item.content = r.data.homeTel;
						}else if(item.title === '住址'){
						   item.content = r.data.homeAddress;
							
						}else if(item.title === '腕表类型'){
						   item.content = r.data.terminalTypeName;
							
						}else if(item.title === '腕表序列号'){
						   item.content = r.data.imieCode;		
						}else if(item.title === '腕表手机号'){
						   item.content = r.data.terminalNumber;
						}						
					})
				})
				.catch(() => {
					this.loading = false;
				});
		},		
		// 通用跳转
		navTo(route) {
			if (!route) return;
			if (route === 'clearCache') {
				uni.showModal({
					content: '确定要清除缓存吗',
					success: e => {
						if (e.confirm) {
							uni.clearStorageSync();
							this.setList[5].content = '0 kb';
							this.$mStore.commit('login', this.user);
							this.$mHelper.toast('清除缓存成功');
						}
					}
				});
				return;
			} else if (route === 'versionUpgrade') {
				this.isVersionUpgradeShow = true;
				if (this.isNewVersion) {
					this.$mHelper.toast('已经是最新版本');
				}
				return;
			}
			this.$mRouter.push({ route });
		},
		// 退出登录
		toLogout() {
			uni.showModal({
				content: '确定要删除设备吗',
				success: e => {
					if (e.confirm) {
					    this.deleteWatch();

					}
				}
			});
		},
		showColorModal() {
			this.colorModal = true;
		},
		SetColor(item) {
			this.colorModal = false;
			this.themeColor = item;
			this.$mStore.commit('setThemeColor', item);
		}
	}
};
</script>
<style lang="scss">
page {
	background: $page-color-base;
}
.set {
	padding: $spacing-base 0;
}
.cu-list.card-menu {
	margin: $spacing-base 0;
	.title {
		margin-left: $spacing-base;
	}
}
</style>
